<template>
<!--销售记录查询-->
  <div style="height: 100%;">
    <div class="find-box">
      <div style="display: flex;margin-left: 20px;padding-top: 10px">
        <a href="#"><div style="display: flex" @click="firstLoading">
          <i class="icon-chaxun" style="margin-top: 4px"></i>
          <h3>&nbsp;&nbsp;销售记录查询</h3>
        </div>
        </a>

<SelectByCondition style="margin-left: 970px" @selectMsgWay="selectMsgWay"/>
      </div>

      <div class="find-box-detail">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="small"
          :data="dataRealShowList"
          height="561"
          style="width: 100%"
          @selection-change="handleSelectionChange" >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                size="mini"
                border
                :data="props.row.saleDetailList"
                style="width: 100%">
                <el-table-column
                  label="产品名称"
                  align="center"
                  >
                  <template slot-scope="scope">
                    {{scope.row.smallType.smallTypeName}} <span style="color: #ff3526">【{{scope.row.specification}}】</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="规格"
                 >
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ checkType(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="数量"
                  align="center">
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ checkUnit(scope.row) }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  label="重量(KG)">
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ checkWeight(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="出货价">
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ scope.row.price }}元</span>

                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="金额">
                  <template slot-scope="scope">
                    <span style="font-weight: bold;font-size: 14px">{{ checkMoney(scope.row) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="销售流水号"
            prop="saleOrderId"
            width="150"
            >
          </el-table-column>
          <el-table-column
            align="center"
            label="出库时间"
            prop="outStorageDate"
            width="100"
            >
          </el-table-column>
          <el-table-column
            align="center"
            label="总价"
            width="90"
           >
            <template slot-scope="scope">
              <span style="font-weight: bold">{{scope.row.orderTotalMoney}}</span><span style="font-weight: bold;font-style: oblique">元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="运费"
            width="80"

          >
            <template slot-scope="scope">
              <span style="font-weight: bold">{{scope.row.freight}}</span><span style="font-weight: bold;font-style: oblique">元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="客户"
            width="200"
            >
            <template slot-scope="scope">
            <span>{{ scope.row.client.clientName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="欠款"
            width="90"
            >
            <template slot-scope="scope">
              <span style="font-weight: bold;color: #ff3526">{{ scope.row.sumMoney-scope.row.given}}</span><span style="font-weight: bold;font-style: oblique;color: #ff3526">元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="收款细节"
            width="90"
            >
            <template slot-scope="scope">
              <el-tag  v-if="checkPayThing(scope)" type="success">已付款</el-tag>
              <el-tag  v-if="!checkPayThing(scope)" type="danger" >未付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="是否收款完毕"
            width="100"
            >
            <template slot-scope="scope">
<!--              未结清-->
              <el-button v-if="scope.row.paymentIsSettled===0 && scope.row.isReconciliation===0 " type="danger" icon="icon-cuowu" circle size="mini"></el-button>
<!--              已经结清-->
              <el-button  v-if="scope.row.paymentIsSettled===1|| scope.row.isReconciliation===1" type="success" icon="icon-jiahao" circle size="mini"></el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开票详情"
            width="90"
            >
            <template slot-scope="scope">
            <el-tag  v-if="scope.row.isInvoice===1 || scope.row.isTiaoPiao===1" type="success">已开票</el-tag>
            <el-tag  v-if="scope.row.isInvoice===0 && scope.row.isTiaoPiao===0" type="danger" >未开票</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="是否开票完毕"
            width="100"
            >
            <template slot-scope="scope">
              <!--              未开票完毕-->
              <el-button v-if="scope.row.invoiceIsSettled===0 && scope.row.isTiaoPiao===0" type="danger" icon="icon-cuowu" circle size="mini"></el-button>
              <!--              已开票完毕-->
              <el-button  v-if="scope.row.invoiceIsSettled===1 && scope.row.isTiaoPiao===1" type="success" icon="icon-jiahao" circle size="mini"></el-button>
            </template>

          </el-table-column>
          <el-table-column
            align="center"
            label="修改"
            width="50"
           >
            <template slot-scope="scope">
              <el-button type="text"><span class="el-icon-edit-outline"></span></el-button>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              label="选定"
              type="selection"
              width="55">
            </el-table-column>

        </el-table>
        <div  style="position: relative">
          <el-pagination
            align="center"
            style="margin-top: 10px"
            background
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
          </el-pagination>
          <div style="position: absolute;right: 6px;top: 0px">
            <el-button  type="info" size="mini">自动开票</el-button>
            <el-button  type="info" size="mini">自动付款</el-button>
            <el-button  type="info" size="mini">选定付款</el-button>
            <el-button  type="info" size="mini">选定开票</el-button>
            <el-button   type="info" size="mini">删除</el-button>
         </div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>


import {get, post} from "../../utils/request";
import {SALE_RECORDING_DATA} from "../../utils/basic-data";
import SelectByCondition from "../../components/select/SaleSelectByCondition";
export default {
  name: "FindBuyRecording",
  components:{SelectByCondition},
  data(){
    return{
      total:0,
      loading:true,
      dataList:[],
      isDataList:false,
      dataRealShowList:[],
      unitList:[],
      selectMsg:{
        currentPage:1,
        pageSize:SALE_RECORDING_DATA,
        timeZone:null,
        bigTypeId:null,
        smallTypeId:null,
        specification:null,
        clientName:null,
        showAllPayInvoice:true,
        showPay:false,
        showInvoice:false
      }


    }
  },
  mounted() {
    this.firstLoading();
    get("/api/v1/unit").then(resp=>{
      this.unitList=resp.data
    })
  },
  methods:{
    checkMoney(value){
      if (value.way===1){
        return value.weight*value.price+"元"
      }else if (value.way===2){
        return value.weight*value.price+"元"
      }else {
        return  value.price*value.quantity+"元"
      }
    },

    checkWeight(value){
      if (value.way===1){
        return value.weight+" (过磅)"
      }else if (value.way===2){
        return  value.weight+" (理算)"
      }else {
        return  "此产品为计件类型"
      }
    },
    checkUnit(value){
      var temp=null
      for (let i = 0; i <this.unitList.length ; i++) {

        if (value.smallType.bigType.unitId===this.unitList[i].unitId){
          temp=this.unitList[i].unitName
          return  value.quantity+temp;
        }
      }

    },
    checkType(value){
      if (value.smallType.bigType.bigTypeId===1||value.smallType.bigType.bigTypeId===3){
        return value.long1+"*"+value.wide+"*"+value.high
      }else if (value.smallType.bigType.bigTypeId===2){
        return value.long1+"*"+value.wide
      }else {
        return value.specification
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    checkPayThing(scope){
      if (scope.row.isReconciliation===0 && scope.row.isWriteOff===0){
              return false;
      }else {
        return true
      }

    },
    selectMsgWay(selectMsg){
      this.loading=true
      this.selectMsg=selectMsg
      this.selectMsg.currentPage=1
      post("/api/v1/sale/find/recording",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.isDataList=true
        this.total=resp.data.total

        this.dataRealShowList=this.dataList.slice((this.selectMsg.currentPage-1)*this.selectMsg.pageSize,this.selectMsg.pageSize*this.selectMsg.currentPage)
        this.loading=false
      })
    },
    firstLoading(){
      this.loading=true
     var  newselectMsg={
        currentPage:1,
          pageSize:SALE_RECORDING_DATA,
          timeZone:null,
          bigTypeId:null,
          smallTypeId:null,
          specification:null,
          clientName:null,
          showAllPayInvoice:true,
          showPay:false,
          showInvoice:false
      }
      this.selectMsg=newselectMsg
      post("/api/v1/sale/find/recording",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.isDataList=true
        this.total=resp.data.total
        this.dataRealShowList=this.dataList.slice((this.selectMsg.currentPage-1)*this.selectMsg.pageSize,this.selectMsg.pageSize*this.selectMsg.currentPage)
        this.loading=false
      })

    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value
      if (this.isDataList){
        this.dataRealShowList=this.dataList.slice((this.selectMsg.currentPage-1)*this.selectMsg.pageSize,this.selectMsg.pageSize*this.selectMsg.currentPage)
        this.loading=false
      }else {
        post("/api/v1/sale/find/recording",this.selectMsg).then(resp=>{
          this.dataList=resp.data.objectList
          this.isDataList=true
          this.total=resp.data.total
        })
        this.loading=false
      }

    }
  },

}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.find-box-detail{
  width: 1260px;
  margin-left: 15px;
  height: 610px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
h3{
  margin: 0;
}

.find-box{
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
